<template>
  <!-- 同类商品推荐 -->
  <div class="GoodsRelevant">
    <div class="header"><i></i>同类商品推荐</div>
    <div class="xtx_carousel">
      <!-- 左右箭头 -->
      <div class="carousel_btn prev" @click="currentIndexChange(-1)">
        <i class="iconfont icon-xiangzuojiantou"></i>
      </div>
      <div class="carousel_btn next" @click="currentIndexChange(1)">
        <i class="iconfont icon-xiangyoujiantou"></i>
      </div>
      <!-- 底部原点 -->
      <div class="carousel_indicator">
        <span
          :class="{ active: currentIndex == index }"
          @click="currentIndex = index"
          v-for="(item, index) in Math.ceil(releventData.length / 4)"
          :key="index"
        ></span>
      </div>
      <ul class="carousel_body">
        <li
          class="carousel_item"
          v-for="(item, i) in Math.ceil(releventData.length / 4)"
          :key="i"
          :class="{ fade: currentIndex == i }"
        >
          <div class="slider">
            <router-link
              :to="'/product/' + items.id"
              v-for="(items, index) in releventData.slice(
                (item - 1) * 4,
                (item - 1) * 4 + 4
              )"
              :key="index"
            >
              <img :src="items.picture" alt="" />
              <p class="name">{{ items.name }}</p>
              <p class="price">￥{{ items.price }}</p>
            </router-link>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { getGoodsRelevant } from "api/product";
import { ref, reactive, toRefs, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
export default {
  props: {},
  name: "GoodsRelevant",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    const data = reactive({
      releventData: [],
      currentIndex: 0,
      /* 点击左右箭头 */
      currentIndexChange: (i) => {
        data.currentIndex += i;
        if (data.currentIndex >= Math.ceil(data.releventData.length / 4)) {
          data.currentIndex = 0;
        }
        if (data.currentIndex < 0) {
          data.currentIndex = Math.ceil(data.releventData.length / 4) - 1;
        }
      },
    });
    watch(
      () => route.params.id,
      (n, o) => {
        getGoodsRelevant({ id: n, limit: 16 }).then((res) => {
          data.releventData = res.result;
        });
      },
      { immediate: true }
    );
    return { ...toRefs(data) };
  },
  components: {},
};
</script>
<style lang="scss" scoped>
/* 如果不想样式污染  就加个scoped */
.GoodsRelevant {
  width: 1240px;
  background-color: #fff;
  margin: 20px auto;
  padding-bottom: 10px;
  .header {
    padding: 20px 15px;
    position: relative;
    display: flex;
    align-items: center;
    i {
      display: block;
      position: relative;
      width: 18px;
      height: 18px;
      border-right: 4px solid var(--color);
      border-bottom: 4px solid var(--color);
      transform: rotate(-45deg);
      margin-right: 15px;
      &::before {
        content: "";
        display: block;
        width: 12px;
        height: 12px;
        background-color: var(--color);
        opacity: 0.5;
      }
    }
  }
  .xtx_carousel {
    position: relative;
    width: 1240px;
    height: 380px;
    /* 左右箭头 */
    .carousel_btn {
      z-index: 3;
      position: absolute;
      width: 44px;
      height: 44px;
      top: 85px;
      cursor: pointer;
      display: flex;
      align-items: center;
      i {
        font-size: 30px;
        color: #ddd;
      }
      justify-content: center;
      &.prev {
        left: 20px;
      }
      &.next {
        right: 20px;
      }
    }
    /* 底部原点 */
    .carousel_indicator {
      position: absolute;
      bottom: 20px;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      span {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        cursor: pointer;
        margin-right: 10px;
        transition: all 0.5s;
        &.active {
          background-color: var(--color);
        }
      }
    }
    .carousel_body {
      position: relative;
      width: 100%;
      .carousel_item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.5s linear;
        &.fade {
          opacity: 1;
          z-index: 2;
        }
        .slider {
          display: flex;
          justify-content: space-around;
          padding: 0 40px;
          & > a {
            display: inline-block;
            width: 240px;
            text-align: center;
            transition: all 0.5s;

            img {
              padding: 20px;
              width: 230px !important;
              height: 230px !important;
            }
            p {
              text-align: center;
              display: -webkit-box;
              overflow: hidden;
              white-space: normal !important;
              text-overflow: ellipsis;
              word-wrap: break-word;
              -webkit-line-clamp: 1;
              padding: 0 40px;
              -webkit-box-orient: vertical;
              color: #000;
              &.price {
                margin-top: 15px;
                color: #cf4444;
              }
            }
          }
        }
      }
    }
  }
}
</style>